<template>
	<div class="bg">
		<!-- 切换背景色 -->
		<div :class="'page-css background-color'+colorGet">
		  <div class="page-top">
		    <div class="color-change">
		      <span style="font-size:12px">切换颜色：</span>
		      <div
		        :class="'color-dix  color'+item"
		        v-for="item in 6"
		        :key="item"
		        @click=" getColor(item)"
		      >
		        <i v-if="item==colorGet">✓</i>
				</div>
		      </div>
		    </div>

		
		<div class="content">
			<div class="textbox">
				<div :class="'chapter-info color'+colorGet">
				<div class="story_title">
					<h1>
						<!-- {{content.name}} -->
						第一章 绯红

					</h1>
					<p class="textinfo">
						<span>书籍：
							<span>诡秘之主</span>&nbsp;
							<!-- <span class="a" @click="goBook(book.id,book.writerId)">{{book.name}}</span>&nbsp; -->
						</span>
						
						<!-- <span>类型：
							异世大陆&nbsp;
							{{book.style}}&nbsp;
						</span> -->
						
						<span>作者：
							<span>爱潜水的乌贼</span>&nbsp;
							<!-- <span class="a" @click="goWriter(book.writerId)">{{writer.name}}</span>&nbsp; -->
						</span>
						<span>字数：
							2425&nbsp;
							<!-- {{content.content.replace(/\s+/g,"").length}}&nbsp; -->
						</span>
						<span>更新时间：
							2018-04-01 12:28:00&nbsp;
							<!-- {{book.updateTime.slice(0,11)}}&nbsp; -->
						</span>
					</p>
				</div>
				<div class="txtwrap">
					<div class="text">
						<div class="bookreadercontent ">
							<p class="body" style="white-space:pre-wrap;">
痛！

好痛！

头好痛！

光怪陆离满是低语的梦境迅速支离破碎，熟睡中的周明瑞只觉脑袋抽痛异常，仿佛被人用棒子狠狠抡了一下，不，更像是遭尖锐的物品刺入太阳穴并伴随有搅动！

嘶……迷迷糊糊间，周明瑞想要翻身，想要捂头，想要坐起，可完全无法挪动手脚，身体似乎失去了控制。

看来我还没有真醒，还在梦里……等下说不定还会出现自以为已经醒了，实际依然在睡的情况……对类似遭遇不算陌生的周明瑞竭力集中意志，以彻底摆脱黑暗和迷幻的桎梏。

然而，半睡半醒之时，意志总是飘忽如同烟雾，难以控制，难以收束，他再怎么努力，依旧忍不住思维发散，杂念浮现。

好端端的，大半夜的，怎么会突然头痛？

还痛得这么厉害！

不会是脑溢血什么的吧？

我擦，我不会就这样英年早逝了吧？

赶紧醒！赶紧醒！

咦，好像没刚才那么痛了？但脑子里还是跟有把钝刀子在慢慢割一样……

看来没法继续睡了，明天还怎么上班？

还想什么上班？有货真价实的头痛，当然是请假啊！不用怕经理罗里吧嗦！

这么一想，好像也不坏啊，嘿嘿，偷得浮生半日闲！

一阵又一阵的抽痛让周明瑞点滴积累起虚幻的力量，终于，他一鼓作气地挺动腰背睁开眼睛，彻底摆脱了半睡半醒的状态。

视线先是模糊，继而蒙上了淡淡的绯红，目光所及，周明瑞看见面前是一张原木色泽的书桌，正中央放着一本摊开的笔记，纸张粗糙而泛黄，抬头用奇怪的字母文字书写着一句话语，墨迹深黑，醒目欲滴。

笔记本左侧靠桌子边缘，有一叠整整齐齐的书册，大概七八本的样子，它们右手边的墙上镶嵌着灰白色的管道和与管道连通的壁灯。

这盏灯很有西方古典风味，约成年人半个脑袋大小，内层是透明的玻璃，外面用黑色金属围出了栅格。

熄灭的壁灯的斜下方，一个黑色墨水瓶笼罩着淡红色的光华，表面的浮凸构成了模糊的天使图案。

墨水瓶之前，笔记本右侧，一根肚腹圆润的深色钢笔静静安放，笔尖闪烁着微光，笔帽搁于一把泛着黄铜色泽的左轮手枪旁边。

手枪？左轮？周明瑞整个人都愣住了，眼前所见的事物是如此陌生，与自己房间没半点相像之处！

惊愕茫然的同时，他发现书桌、笔记本、墨水瓶、左轮手枪都蒙着一层绯红的“轻纱”，那是窗外照进来的光辉。

下意识间，他抬起脑袋，视线一点点上移：

半空之中，黑色“天鹅绒幕布”之上，一轮赤红色的满月高高悬挂，宁静照耀。

这……周明瑞惶恐莫名，猛地站起，可双腿还未完全打直，脑袋又是一阵抽痛，这让他短暂失去力量，重心不由自主下坠，屁股狠狠地撞击在了硬木所制的椅面上。

啪！

疼痛未能造成影响，周明瑞以手按桌，重又站起，慌乱地转过身体，打量自身所处的环境。

这是个不大的房间，左右两侧各有一扇棕门，紧挨对面墙壁的是张木制高低床。

它与左门之间放着个橱柜，上面对开，下方是五个抽屉。

橱柜边缘，一人高的位置，同样有灰白色管道镶嵌于墙上，但它连通的是个奇怪的机械装置，少许地方裸露着齿轮和轴承。

近书桌的右墙角堆放着类似煤炭炉的事物，以及汤锅、铁锅等厨房用具。

越过右门是一扇有两道裂纹的穿衣镜，木制底座的花纹简单而朴素。

目光一扫，周明瑞隐隐约约看见了镜中的自己，现在的自己：

黑发，褐瞳，亚麻衬衣，体型单薄，五官普通，轮廓较深……

这……周明瑞顿时倒吸了口凉气，心头涌现出诸多无助又凌乱的猜测。

左轮手枪，欧美古典风味布置，以及那轮与地球迥异的绯红之月，无一不在说明着某件事件！

我，我不会穿越了吧？周明瑞嘴巴一点点张开。

他看网文长大，对此常有幻想，可当真正遇到，一时却难以接受。

这大概就是所谓的叶公好龙吧？过了几十秒，周明瑞苦中作乐地自我吐槽了一句。

若非脑袋的疼痛依旧存在，让思维变得紧绷而清晰，他肯定会怀疑自己在做梦。

平静，平静，平静……深呼吸了几下，周明瑞努力让自身不要那么慌乱。

就在这时，随着他身心的调和，一个个记忆片段突兀跳出，缓慢呈现于他的脑海之中！

克莱恩.莫雷蒂，北大陆鲁恩王国阿霍瓦郡廷根市人，霍伊大学历史系刚毕业的学生……

父亲是皇家陆军上士，牺牲于南大陆的殖民冲突，换来的抚恤金让克莱恩有了进入私立文法学校读书的机会，奠定了他考入大学的基础……

母亲是黑夜女神信徒，在克莱恩通过霍伊大学入学考试那年过世……

还有一个哥哥，一个妹妹，共同住在公寓的两居室内……

家庭并不富裕，甚至可以说不佳，目前全靠在进出口公司当文员的哥哥维持……

作为历史系毕业生，克莱恩掌握了号称北大陆诸国文字源头的古弗萨克语，以及古代陵寝里经常出现，与祭祀、祈祷相关的赫密斯文……

赫密斯文？周明瑞心头一动，伸手按住抽痛的太阳穴，将视线投向了书桌上摊开的那本笔记，只觉泛黄纸张上的那行文字从奇怪变得陌生，从陌生变得熟悉，从熟悉变得可以解读。

这是用赫密斯文书写的话语！

那深黑欲滴的墨迹如是说：

“所有人都会死，包括我。”

嘶！周明瑞莫名惊恐，身体本能后仰，试图与笔记本，与这行文字拉开距离。

他很是虚弱，险些跌倒，慌忙伸手按住桌缘，只觉四周的空气都变得躁动，耳畔隐约有细密的呢喃在回荡，有种小时候听长辈讲恐怖故事的感受。

摇了下头，一切只是幻觉，周明瑞重新站稳，将目光从笔记本上移开，大口喘起了气。

这时，他的视线落在了那把闪烁黄铜光泽的左轮手枪处，心头霍然冒出了一个疑问。

“以克莱恩的家境，哪有钱和渠道买手枪？”周明瑞不由皱起了眉头。

沉思之中，他忽然发现书桌边缘多了半个红色手印，色泽比月华更深，比“轻纱”更厚。

那是血手印！

“血手印？”周明瑞下意识翻开了刚才按住桌缘的右手，低头一瞧，只见掌心和手指满是血污。

与此同时，他脑袋的抽痛依旧传来，略微减弱，连绵不绝。

“不会磕破头了吧？”周明瑞边猜想边转过身体，走向那面有裂纹的穿衣镜。

几步之后，中等身材，黑发褐瞳，有着明显书卷气的身影清晰映入了他的眼帘。

这就是现在的我，克莱恩.莫雷蒂？

周明瑞怔了一下，因为大半夜光亮不够，看不太清楚，于是又继续往前，直到只差一步就能撞到镜子。

就着轻纱般的绯红月光，他侧过脑袋，查看额角的情况。

清晰倒映的镜子如实呈现，一个狰狞的伤口盘踞在他的太阳穴位置，边缘是烧灼的痕迹，周围沾满了血污。

								<!-- {{content.content}} -->
							</p>
							
			
							
						</div>

						
					</div>
				</div>

			</div>

		</div>
</div>

</div>
		
		
		<!-- 左悬浮框 -->
		<div id="leftFloatBar" class="leftFloatBarBtnList">
			<ui class="barList">
				<li>
					<a class="el-icon-menu">
						<div class="catalogue">
							<span id="catalogue">目录</span>
							<ul>
								<!-- <li v-for="(item) in directory" :key="item.id" @click="contentPage(item.id,item.bookId)">{{item.name}}</li> -->
								<li>第一章 绯红</li>
								<li>第二章 情况</li>
								<li>第三章 梅丽莎</li>
								<li>第四章 占卜</li>
								<li>第五章 仪式</li>
								<li>第六章 非凡者</li>
								<li>第七章 代号</li>
								<li>第八章 新的时代</li>
								<li>第九章 笔记</li>
								<li>第十章 常态</li>
							</ul>
						</div>
					</a>
				</li>

				<li>
					<router-link :to="{ path: '/'}" replace="">
					<a class="el-icon-s-fold" title="返回书籍"></a>
					</router-link>
				</li>
				
<!-- 									<li>
										<a class="el-icon-caret-left" title="上一章" onclick="prev"></a>
										
									</li>
									
									<li>
										<a class="el-icon-caret-right" title="下一章" onclick="reader-next"></a>

									</li> -->
									

				<li>
				    <div  v-if="!isActive" class="item" @click="collection()" title="加入书架">
				        <a class="el-icon-circle-plus"></a>
				    </div>
				    <div  v-if="isActive" class="item" @click="delCollection()" title="移出书架">
				        <a class="el-icon-remove"></a>
				    </div>
				</li>
				

				

				<!--  <li>
                <div  v-if="!isActive" class="item" @click="collection" title="加入书架">
                   <svg class="icon">
                        <use xlink:href="#icon-xihuan-shi"></use>
                    </svg>
                </div>
                <div  v-if="isActive" class="item" @click="delCollection" title="移出书架">
                   <svg class="icon active">
                        <use xlink:href="#icon-xihuan-shi"></use>
                    </svg>
                </div>
            </li> -->

			</ui>

		</div>

		<!-- 右上悬浮框 -->
		<div id="rightFloatBar" class="rightFloatBarBtnList">
			<ui class="barList">
				<li>
					<div v-if="key" class="item" @click="start()" title="开启滚动">
						<a class="el-icon-warning-outline"></a>
					</div>
					<div v-if="!key" class="item" @click="stop()" title="暂停滚动">
						<a class="el-icon-warning"></a>
					</div>
				</li>
				<li>
					<el-input-number controls-position="right" step="5" v-model="speed" size="mini" @change="handleChange" :min="1" :max="100" label="滚动速度"
					 class="changeSpeed"></el-input-number>
				</li>
			</ui>
		</div>

		<!-- 返回顶部按钮 -->
	
		<div id="rightFloatBar" class="rightDwonFloatBarBtnList">
			
			<ui class="barList">
				
				<li>
					<a class="el-icon-upload2" @click="backTop">
					</a>
				</li>
				
			</ui>
			
			 <router-view></router-view>
		</div>

		
	</div>


</template>
<script>
	export default {
		name: 'Content',
		data() {
			return {
				id: '',
				bookId: '1',
				writerId: '',
				directory: '',
				content: [],
				book: [],
				writer: [],
				key: true,
				timer: 0,
				speed: 10,
				btnFlag: false,
				scroll: 0,
				colorGet: 1
			}
		},
		    created() {
		        // this.id = this.$route.query.id;
		        // this.bookId = this.$route.query.bookId;
		        // this.writerId = this.$route.query.writerId;
		        // this.getContent();
		        // this.getBook();
		       this.getBookDetail();
		        // this.flag();
		    },

		methods: {
		async getBookDetail() {
			const {
				data: result
			} = await this.$http.get(`/detail/${this.bookId}`)
			console.log(result);
		},

			/* 改变颜色 */
			getColor(num) {
			  this.colorGet = num;
			},
	
			/* 滚动阅读 */
			start() {
				var _this = this;
				if (this.key) {
					this.timer = setInterval(function() {
						window.scrollBy(0, 2);
						_this.flag();
					}, this.speed)
					this.key = false;
				}
			},
			stop() {
				clearInterval(this.timer);
				this.key = true;
			},
			handleChange() {
				if (!this.key) {
					clearInterval(this.timer);
					this.key = true
					this.timer = setInterval(function() {
						window.scrollBy(0, 2);
					}, this.speed)
					this.key = false;
				}
			},

			/* 返回顶部 */
			backTop() {//加计时器，使得返回顶部时有fade 的效果
				const that = this;
				let timer = setInterval(() => {
					let upSpeed = Math.floor(-that.scrollTop / 5);
					document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + upSpeed;
					if (that.scrollTop === 0) {
						clearInterval(timer);
					}
				}, 16)
			},
			scrollToTop() {//计算距离顶部的高度（高度大于60，显示返回按钮，否则隐藏）
				const that = this;
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				that.scrollTop = scrollTop;
				if (that.scrollTop > 60) {
					that.btnFlag = true;
				} else {
					that.btnFlag = false;
				}
			}

		},
		beforeCreate() {
		    document.querySelector('body').setAttribute('style', 'margin : 0 ')
		},
		// beforeDestroy() {
		//     document.body.removeAttribute('style')
		// },
		mounted() {
			window.addEventListener('scroll', this.scrollToTop, true)
		},
		destroyed() {
			window.removeEventListener('scroll', this.scrollToTop)
		}
		
	}
</script>
<style lang="css" scoped>

.page-top {
	
  display: flex;
  align-items: center;
  width: 88%;
  justify-content: space-between;
}

.color-change {
	padding-top: 10px;
	padding-left: 220px;
  display: flex;
  align-items: center;
  /* width: 70%; */
  justify-content: space-between;
}
.color-dix {
  width: 22px;
  height: 22px;
  border: 1px solid #cccccc;
}
	
.bottom{
	background-color:#F6F4EC ;

}

.reader-prev{
	width: 400px;
	float: left;
	line-height: 50px;
	margin-top: 10px;
	margin-left: 425px;
	padding: 0 124px 0 124px;
	box-shadow: 0 0 15px 0 #CCC;
	text-align: center;
	width: 100px;
	cursor: pointer;
	background-color: #F6F4EC;
	/* position: relative; */
}

.reader-book-title{
	width: 20%;
	float: left;
	line-height: 50px;
	margin-top: 10px;
	margin-left: 5px;
	padding: 0 124px 0 124px;
	box-shadow: 0 0 15px 0 #CCC;
	text-align: center;
	width: 100px;
	cursor: pointer;
	background-color: #F6F4EC;
	/* position: relative; */
}

.reader-next{
	width: 333px;
	float: left;
	line-height: 50px;
	margin-top: 10px;
	margin-left: 5px;
	padding: 0 124px 0 124px;
	box-shadow: 0 0 15px 0 #CCC;
	text-align: center;
	width: 100px;
	cursor: pointer;
	background-color: #F6F4EC;
	/* position: relative; */
}

/* 背景 */
	.bg{
		background-color:#F6F4EC ;
		margin-bottom: -50px;
	}

	.changeSpeed {
		width: 90px;
	}

	.content {
		/* 调成100px空出头部分 */
		margin-top: 60px;
		/* width: 100%; */
	}

	.textbox {
		background-color: #F6F4EC;
		box-shadow: 0 0 15px 0 #CCC;
		background: #F6F4EC;
		border-radius: 3px;
		/* padding-bottom: 40px; */
		width: 1000px;
		margin:auto;
		margin-top: -35px;
		color: #333;

	}

	
	.story_title {
		width: 88%;
		margin: 0 auto;
		padding: 10px 0 10px 0px;
		border-bottom: 1px solid #E3E1D9;
		position: relative;
	}

	/* 标题 */
	.story_title h1 {
		padding-top: 10px;
		font: 30px/1 "Microsoft YaHei";
		font-weight: bold;
		margin-bottom: 20px;
		color: #000;
		text-align: center;
	}

	/* 相关信息 */
	.textinfo {
		color: #999;
		font: 14px/1.8 "Microsoft YaHei";
		position: relative;
		text-align: center;
	}

	.textinfo span {
		margin-right: 10px;
	}

	.text {
		width: 90%;
		margin: 0 auto;
	}

	/* 正文 */
	.bookreadercontent {
		line-height: 1.8;
		font-size: 20px;
		padding-top: 16px;
		min-height: 360px;
		word-break: break-all;
		width: 100%;
	}

	.leftFloatBarBtnList {
		/* 固定在页面上 */
		position: fixed;
		z-index: 50;
		left: 360px;
		top: 100px;
		width: 60px;
	}

	.rightFloatBarBtnList {
		/* 固定在页面上 */
		position: fixed;
		z-index: 50;
		right: 360px;
		top: 100px;
		width: 60px;
	}

	.rightDwonFloatBarBtnList {
		/* 固定在页面上 */
		position: fixed;
		z-index: 50;
		right: 360px;
		top: 92%;
		width: 60px;
	}

	.barList {
		list-style: none;
	}

	/* 侧边栏 */
	.barList li {
		box-shadow: 0 0 5px #BBB;
		margin-bottom: 2px;
		width: 60px;
		position: relative;
	}

	.barList li a {
		display: block;
		width: 60px;
		height: 60px;
		position: relative;
		background-color: #F6F4EC;
		text-align: center;
		line-height: 60px;
		font-size: 22px;
		cursor: pointer;
	}

	.barList li a:hover {
		background-color: #fff;
	}

	.barList li a:hover .catalogue {
		display: block;
	}

	#catalogue{
		margin-left: 5%;
	}

	/* 目录 */
	.catalogue {
		padding: 0 10px 10px;
		display: none;
		position: absolute;
		left: 60px;
		top: 0;
		width: 780px;
		background-color: #fff;
		text-align: left;
	}

	.catalogue {
		line-height: 28px;
		box-shadow: 0 0 15px 0 #CCC;
		margin-left: 2px;
	}

	.catalogue #catalogue {
		border-bottom: 2px solid #2DA0FF;
		padding-top: 20px;
		font-size: 25px;
		display: inline-block;
		color: #2DA0FF;
	}

	.catalogue li {
		font-size: 16px;
		border-bottom: 1px dotted #ccc;
		width: 260px;
		box-shadow: none;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		float: left;
		padding: 10px 0 5px 10px;
		width: 45%;
	}

	.catalogue li:hover {
		color: #2DA0FF;
	}

	.body {
		margin-top: 0;
	}

	.a {
		cursor: pointer;
		color: #333;
	}

	.a:hover {
		color: #2DA0FF;
	}

	.item {
		position: relative;
		width: 60px;
		height: 60px;
		line-height: 72px;
		text-align: center;
		cursor: pointer;
		background-color: #F6F4EC;
		font-size: 18px;
	}

	.item:hover {
		background-color: #fff;
	}

	.active {
		color: #2DA0FF !important;
	}

	.icon {
		width: 1.2em;
		height: 1.2em;
		font-size: 1.2em;
		color: #000;
		fill: currentColor;
		overflow: hidden;
		position: relative;
	}
	
	.color1 {
	  background-color: #faf5ebcc;
	}
	.color2 {
	  background-color: #f5eacccc;
	}
	.color3 {
	  background-color: #e6f2e6cc;
	}
	.color4 {
	  background-color: #e4f1f5cc;
	}
	.color5 {
	  background-color: #e0e0e0cc;
	}
	.background-color1 {
	  background-color: #ede7da;
	}
	.background-color2 {
	  background-color: #e0ce9e;
	}
	.background-color3 {
	  background-color: #cddfcd;
	}
	.background-color4 {
	  background-color: #cfdde1;
	}

	.background-color5 {
	  background-color: #d0d0d0;
	}
</style>
